<!-- <html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
      body{
        background: rgb(50, 54, 57);
      }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html> -->


<html>
 <head>
  <script type="application/javascript">
    function save_restore() {
      var ctx = document.getElementById('canvas').getContext('2d');

      ctx.fillRect(0,0,150,150);   // 使用默认设置绘制一个矩形
      ctx.save();                  // 保存默认状态

      ctx.fillStyle = '#09F'       // 在原有配置基础上对颜色做改变
      ctx.fillRect(15,15,120,120); // 使用新的设置绘制一个矩形

      ctx.save();                  // 保存当前状态
      ctx.fillStyle = '#FFF'       // 再次改变颜色配置
      ctx.globalAlpha = 0.5;    
      ctx.fillRect(30,30,90,90);   // 使用新的配置绘制一个矩形

      ctx.restore();               // 重新加载之前的颜色状态 也就是 #FFF 之前的  #09F
      ctx.fillRect(45,45,60,60);   // 使用上一次的配置绘制一个矩形

      ctx.restore();               // 加载默认颜色配置
      ctx.fillRect(60,60,30,30);   // 使用加载的配置绘制一个矩形
    }

    // 移动 Translating
    function translate() {
      var ctx = document.getElementById('canvas').getContext('2d');
      for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
          ctx.save();
          ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
          ctx.translate(10 + j * 50, 10 + i * 50);
          ctx.fillRect(0, 0, 25, 25);
          ctx.restore();
        }
      }
    }

    // 旋转 Rotating
    function rotate() {
      var ctx = document.getElementById('canvas').getContext('2d');
      ctx.translate(75,75);

      for (var i=1;i<6;i++){ // Loop through rings (from inside to out)
        ctx.save();
        ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

        for (var j=0;j<i*6;j++){ // draw individual dots
          ctx.rotate(Math.PI*2/(i*6));
          ctx.beginPath();
          ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
          ctx.fill();
        }

        ctx.restore();
      }
    }
// 缩放 Scaling
    function Scaling() {
      var ctx = document.getElementById('canvas').getContext('2d');

      // draw a simple rectangle, but scale it.
      ctx.save();
      ctx.scale(10, 3);
      ctx.fillRect(1, 10, 10, 10);
      ctx.restore();

      // mirror horizontally
      ctx.scale(-1, 1);
      ctx.font = '48px serif';
      ctx.fillText('MDN', -135, 120);
    }
// 变形 Transforms
    function Transforms() {
      var ctx = document.getElementById('canvas').getContext('2d');

      var sin = Math.sin(Math.PI/6);
      var cos = Math.cos(Math.PI/6);
      ctx.translate(100, 100);
      var c = 0;
      for (var i=0; i <= 12; i++) {
        c = Math.floor(255 / 12 * i);
        ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
        ctx.fillRect(0, 0, 100, 10);
        ctx.transform(cos, sin, -sin, cos, 0, 0);
      }
      
      ctx.setTransform(-1, 0, 0, 1, 100, 100);
      ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
      ctx.fillRect(0, 50, 100, 100);
    }

    
    function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');
      ctx.fillRect(0,0,150,150);
      ctx.translate(75,75);

      // Create a circular clipping path
      ctx.beginPath();
      ctx.arc(0,0,60,0,Math.PI*2,true);
      ctx.clip();

      // draw background
      var lingrad = ctx.createLinearGradient(0,-75,0,75);
      lingrad.addColorStop(0, '#232256');
      lingrad.addColorStop(1, '#143778');
      
      ctx.fillStyle = lingrad;
      ctx.fillRect(-75,-75,150,150);

      // draw stars
      for (var j=1;j<50;j++){
        ctx.save();
        ctx.fillStyle = '#fff';
        ctx.translate(75-Math.floor(Math.random()*150),
                      75-Math.floor(Math.random()*150));
        drawStar(ctx,Math.floor(Math.random()*4)+2);
        ctx.restore();
      }
      
    }
    function drawStar(ctx,r){
      ctx.save();
      ctx.beginPath()
      ctx.moveTo(r,0);
      for (var i=0;i<9;i++){
        ctx.rotate(Math.PI/5);
        if(i%2 == 0) {
          ctx.lineTo((r/0.525731)*0.200811,0);
        } else {
          ctx.lineTo(r,0);
        }
      }
      ctx.closePath();
      ctx.fill();
      ctx.restore();
    }
  </script>
 </head>
     <style type="text/css">
      canvas { border: 1px solid black; }
      body{
        background: rgb(50, 54, 57);
      }
    </style>
 <body onload="draw();">
   <canvas id="canvas" width="450" height="300"></canvas>
 </body>
</html>

<!-- 

<html>
 <head>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
     <style type="text/css">
      canvas { border: 1px solid black; }
      body{
        background: rgb(50, 54, 57);
      }
    </style>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html> -->